<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>过滤器</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<style>
    .nima{
        width: 100%;
        height: 150px;
        background-color: salmon;
    }
    .nima:hover{
        background-color: palevioletred;
    }
</style>
<body>
<div id="app">

    <div>过滤器是对值的再操作，类似angular管道</div>
    <div class="nima">{{hh|addHtmlNode}}</div>

    <p>
        <!--操作的是字符串。允许{{}} 和v-bind，但不能放到html指令中-->
    <!--<div class="nima" v-html="hh|addHtmlNode"></div>-->

    <div v-bind:class="hh|coverToNima"></div>

    <p></p>
    <!--过滤器实际是一个函数，所以可以传值到vue中,不过函数第一个值始终是所要操作的值（这也是过滤器存在的意义）-->
    <!--允许接受js表达式-->
    <div class="nima">{{hh|coverToNima()|sendArgs('hehe','a,b,c'.split(','))}}</div>
    </p>
</div>

<script>
    var v = new Vue({
        el: '#app',
        data:{
            hh:"<h1>不知道行不行</h1>"
        },

        filters:{
            addHtmlNode:function (val) {
                return "<div style='background-color: dodgerblue'>" + val +"</div>";
            },
            coverToNima:function (val) {
                console.log(val)
                return "nima";
            },

            sendArgs:function (val,arg1,arg2) {
                alert(val)
                return val+" "+arg1+" "+arg2;
            },
            send:function (val,arg1,arg2) {
                return val+" "+arg1+" "+arg2;
            },
        }

    })

    setTimeout(function () {
        v.nima = false;
    },2000)
</script>

</body>
</html>